<template>
	<view>
		<view class="nav">
			<view class="nav_box">
				<view class="nav_vla">

					<img v-if="userData" class="nav_vla_img" :src="userData.avatar" alt="" />
					<img v-else class="nav_vla_img"
						src="https://cdn.asiatop.net/resources/vouchery/static/missing-face.png" alt=""
						@click="handleLogin" />
				</view>

				<view class="nav_vla_text">
					<span>{{ userData.phone }}</span>
				</view>
				<view class="" v-if="!isShow" @click="handleLogin">
					登录注册
				</view>
			</view>
			<!-- 当有token的时候就为true展示退出登录 -->
			<view class="dropOut" v-if="isShow">
				<span class="dropOutText" @click="dropout">退出登录</span>
			</view>
			<!-- 弹框 -->
			<uni-popup ref="popup" type="center" before-close="true">
				<view class="pop">
					<view class="title"> 提示 </view>
					<view class="tip-info">
						<view class="" style="color: #999;"> <span>是否退出当前账号</span> </view>

					</view>
					<view class="sure">
						<view class="sureX" @click="cancal"> 取消 </view>
						<view class="sureQ" @click="ok"> 确定</view>
					</view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	computed
} from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	logout
} from '@/common/js/api.js'
const app = getApp()
// 弹框
const popup = ref()

const isShow = ref(false)
const istoken = ref(false)
const userData = ref('')
onLoad(() => {
	let token = uni.getStorageSync('token')
	if (token) {
		istoken.value = true
		isShow.value = true
	}
	userData.value = uni.getStorageSync('userInfo')

})


const handleLogin = () => {
	console.log('e')
	uni.reLaunch({
		url: '/pages/login/public/logintype'
	})

}

// 打开退出提示弹框
const status = ref(false)
const qudenglu = ref(false)
const dropout = () => {
	console.log('哒哒哒')
	qudenglu.value = true
	status.value = !status.value;
	popup.value.open('center')
	console.log('red');

}

const cancal = () => {
	popup.value.close()
}

// 退出登录
const ok = () => {
	popup.value.close()
	status.value == true


	logout().then((res) => {
		console.log('成功', res);

		// 清楚对应的token和删除用户信息

		uni.removeStorageSync('token');
		uni.removeStorageSync('userInfo');

		// 退出成功跳转到登录页面
		uni.reLaunch({
			url: '/pages/login/index'
		});

	}).catch((err) => {
		console.error('退出登录失败', err);
	})




	console.log('>')
}
</script>

<style scoped lang="scss">
.nav {
	position: relative;
	width: 100%;
	height: 280rpx;
	background: linear-gradient(96deg, #d7507a 0%, #4a67a5 100%);
}

.nav_box {
	padding: 80rpx 0 0 40rpx;
	display: flex;
	align-items: center;
}

.nav_vla {
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
	border: #fff 4rpx solid;

}

.nav_vla_img {
	width: 100%;
	height: 100%;
}

.nav_vla_text {
	padding-left: 20rpx;
	color: floralwhite;
}

.dropOut {
	width: 140rpx;
	height: 70rpx;
	background-color: #EA1D62;
	position: absolute;
	right: 1rpx;
	bottom: 60rpx;
	border-radius: 50px 0 0 50px;
	display: flex;
	align-items: center;
	justify-content: center;

	.dropOutText {
		font-size: 24rpx;
		color: #fff;
	}
}




// 弹框
.pop {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 16rpx;
	height: 250rpx;
	z-index: 99;
	width: 600rpx;
	padding: 40rpx 0;
}

.title {
	text-align: center;
	font-size: 36rpx;
	font-weight: 500;
	// margin-top: 38rpx;
}

.tip-info {
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #666;
	margin-top: 40rpx;
	margin-bottom: 50rpx;
	text-align: center;

}

.sure {
	width: 100%;
	border-top: 1rpx solid #d1d1d1;
	height: 82rpx;
	text-align: center;
	line-height: 112rpx;
	color: #02A53C;
	font-size: 34rpx;
	font-weight: 500;
	display: flex;
	justify-content: space-around;

	.sureQ {
		color: rgb(0, 122, 255);
	}
}
</style>